<template>
	<div class="">

		<div class="smp-search smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">机构维护</div>
			</div>
			<div class="smp_panel_body" style="padding:0">

				<el-container class="orgContainer">
					<el-aside style="width:260px" class="orgAside">
						<el-scrollbar style="width: 100%;">
							<el-tree :data="datas" size="mini" :props="defaultProps" @node-click="handleNodeClick"
								highlight-current default-expand-all node-key="seqCate" :expand-on-click-node="false">

								<span class="custom-tree-node" slot-scope="{node,data}" @mouseenter="mouseenter(data)"
									@mouseleave="mouseleave(data)">
									<span @click="() => update(data)">{{node.label}}</span>
									<span style="margin-left: 10px;">
										<el-button v-show="data.show" class="item" effect="dark" content="新增"
											placement="top" type="text" size="mini" @click="() => add(data)"
											icon="el-icon-circle-plus-outline"></el-button>
										<el-button v-show="data.show" class="item" effect="dark" content="删除"
											placement="top" v-if="data.orgLevel!='0'" type="text" size="mini"
											@click="() => remove(data)" icon="el-icon-circle-close"></el-button>
									</span>
								</span>
							</el-tree>
						</el-scrollbar>
					</el-aside>
					<el-main style="padding:0">
						<div class="smp_panel_1" style="margin-left: 10px;margin-top: 0;">
							<div class="smp_panel_header">
								<div class="smp_panel_pre"></div>
								<div class="smp_panel_title">{{caozNmae}}</div>
							</div>
							<div class="smp_panel_body">
								<el-form :inline="false" label-width="110px" size="mini" ref="form" :model="form"
									:rules="rules">
									<el-row class="el-row-two">
										<el-col :span="12">
											<el-form-item label="父节机构名称:" prop="parentName">
												<el-input v-model="form.parentName" :disabled="true"></el-input>
											</el-form-item>
										</el-col>
										</el-row>
										<el-row>
										<el-col :span="12" >
											<el-form-item label="机构编号:" prop="seqCate">
												<el-input v-model="form.seqCate" :disabled="seqCateDisabled"></el-input>
											</el-form-item>
										</el-col>
											</el-row>
										<el-row>
										<el-col :span="12">
											<el-form-item label="机构名称:" prop="orgName">
												<el-input v-model="form.orgName" :disabled="orgNameDisabled"></el-input>
											</el-form-item>
										</el-col>
										</el-row>
										<el-row>
										<el-col :span="12">
											<el-form-item label="行内机构号:" prop="orgCode">
												<el-input v-model="form.orgCode" :disabled="orgCodeDisabled"></el-input>
											</el-form-item>
										</el-col>
											</el-row>
										<!-- <el-row>
										<el-col :span="12">
											<el-form-item label="机构地理位置:" prop="orgAddress">
												<el-input v-model="form.orgAddress" :disabled="orgAddressDisabled">
												</el-input>
											</el-form-item>
										</el-col>
											</el-row> -->
										<el-row>
										<el-col :span="24">
											<el-form-item label="描述:" prop="description">
												<el-input type="textarea" :rows="3" v-model="form.description"
													:disabled="descriptionDisabled"></el-input>
											</el-form-item>
										</el-col>

										<!-- <el-col :span="24">
											<el-form-item label="创建日期:" prop="createDate">
												<el-input v-model="form.createDate" :disabled="true"></el-input>
											</el-form-item>
										</el-col>

										<el-col :span="24">
											<el-form-item label="修改日期:" prop="updateDate">
												<el-input v-model="form.updateDate" :disabled="true"></el-input>
											</el-form-item>
										</el-col>
 -->

										<el-col :span="24">
											
										</el-col>
									</el-row>
								</el-form>

							</div>
						</div>

					</el-main>

				</el-container>





				<!-- <el-row  justify="space-between" class="el-row-one" v-if="labelShow">
		
		<el-col :span="6" class="space_line">
			<el-scrollbar style="width: 100%;">
				<el-tree :data="datas" size="mini" :props="defaultProps" @node-click="handleNodeClick" highlight-current default-expand-all
						 node-key="seqCate" :expand-on-click-node="false">
						 
						 <span class="custom-tree-node" slot-scope="{node,data}"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
							 <span @click="() => update(data)">{{node.label}}</span>
							 <span style="margin-left: 10px;">
									 <el-button v-show="data.show" class="item" effect="dark" content="新增" placement="top" type="text" size="mini" @click="() => add(data)" icon="el-icon-circle-plus-outline"></el-button>
									 <el-button v-show="data.show" class="item" effect="dark" content="删除" placement="top" v-if="data.orgLevel!='0'" type="text" size="mini" @click="() => remove(data)" icon="el-icon-circle-close"></el-button>
							 </span>
						 </span>
				</el-tree>
			</el-scrollbar>
		</el-col>
		
		<el-col :span="18" v-if="formShow" >
			
		
		
		</el-col>
	</el-row >
		
		</div>
		</div> -->
		<div class="org_footer">
			<el-button @click="creatOrg" type="primary" size="mini" plain
				>
				<i class="el-icon-check"></i>
				确认
			</el-button>
			<!-- <el-button @click="resetOrg"  size="mini"
				>
				<i class="el-icon-close"></i>
				取消
			</el-button> -->
		</div>
		
</div>
		</div>
			</div>
</template>

<script>
	"use strict";
	import {
		getOrgNameList,
		getOrgById,
		addOrg,
		updateOrg,
		deteleOrg
	} from '@/api/org.js';

	export default {
		components: {},
		data() {
			return {
				type: '',
				orgList: [],
				datas: [],
				caozNmae: '',
				labelShow: true,
				formShow: false,
				form: {
					seqCate: "",
					orgName: "",
					parentId: "",
					orgLevel: "",
					createDate: "",
					createUser: "",
					updateDate: "",
					updateUser: "",
					status: "",
					description: "",
					label: "",
					orgCode:''
				},
				rules: {
					seqCate: [{
						required: true,
						message: '请输入机构编号',
						trigger: 'blur'
					}],
					orgName: [{
						required: true,
						message: '请输入机构名称',
						trigger: 'blur'
					}],
					orgCode: [{
						required: true,
						message: '请输入行内机构号',
						trigger: 'blur'
					}],
					orgAddress: [{
						required: true,
						message: '请输入机构地理位置',
						trigger: 'blur'
					}],
				},

			};
		},
		created() {
			this.getList();
			this.labelShow = true;
			this.add({
				orgLevel: '0'
			});
		},
		methods: {

			handleNodeClick(data) {
				console.log(data);
			},

			//保存
			creatOrg() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						if (this.type == "修改") {
							updateOrg(this.form).then(response => {
								if (response.data.code == "0000") {
									this.$message.success(response.data.message);
								} else {
									this.$message.error(response.data.message);
								}
							}).catch(error => {
								this.$message.error(error.message);
							});


						} else if (this.type == "新增") {
							addOrg(this.form).then(response => {
								if (response.data.code == "0000") {
									this.$message.success(response.data.message);
								} else {
									this.$message.error(response.data.message);
								}
								this.labelShow = false;
								this.formShow = false;
								this.getList();
								this.update(this.form.seqCate);
								this.$nextTick(() => {
									this.labelShow = true;
									this.formShow = true;
								});

							}).catch(error => {
								this.$message.error(error.message);
							});
						}


					}
				});
			},

			//取消
			resetOrg() {
				// this.formShow=false;
				this.$nextTick(() => {
					this.formShow = false;
				});
			},

			getList() {
				getOrgNameList().then(response => {
					this.datas = response.data.extend
					this.total = response.data.extend.total;
					// alert(JSON.stringify(this.orgNameList));
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},


			update(data) {
				this.formShow = true;
				if (data.seqCate == 1) {
					this.caozNmae = "修改机构";
					this.type = "修改",
						this.form.parentName = '机构信息';
					this.form.orgLevel = '0';
					this.form.orgName = "";
					this.form.orgCode = "";
					this.form.orgAddress = "";
					this.form.description = "";
					this.form.createDate = "";
					this.form.updateDate = "";
					this.seqCateDisabled = true;
					this.orgNameDisabled = true;
					this.orgCodeDisabled = true;
					this.orgAddressDisabled = true;
					this.descriptionDisabled = true;
				} else {
					getOrgById({
						"seqCate": data.seqCate
					}).then(response => {
						this.form = response.data.extend;
						this.caozNmae = "修改机构";
						this.type = "修改",
							this.seqCateDisabled = true;
						this.orgNameDisabled = false;
						this.orgCodeDisabled = false;
						this.orgAddressDisabled = true;
						this.descriptionDisabled = false;
						if (this.form.parentId == '0') {
							this.form.parentName = '机构信息';
						}

					}).catch(error => {
						console.info("失败");
						console.info(error.message);
					});
				}
			},

			add(data) {
				this.formShow = true;
				if (data.orgLevel == '0') { //第一层 机构信息
					this.caozNmae = "新增机构";
					this.type = "新增",
						this.form.parentId = '0';
					this.form.parentName = '机构信息';
					this.form.orgLevel = '0';
					this.form.seqCate = "";
					this.form.orgName = "";
					this.form.orgCode = "";
					this.form.orgAddress = "";
					this.form.description = "";
					this.form.createDate = "";
					this.form.updateDate = "";
					this.seqCateDisabled = false;
					this.orgNameDisabled = false;
					this.orgCodeDisabled = false;
					this.orgAddressDisabled = false;
					this.descriptionDisabled = false;
				} else {
					getOrgById({
						"seqCate": data.seqCate
					}).then(response => {
						this.form = response.data.extend;
						this.caozNmae = "新增机构";
						this.type = "新增",
							this.form.parentId = this.form.seqCate;
						this.form.parentName = this.form.orgName;
						this.form.orgName = "";
						this.form.orgCode = "";
						this.form.orgAddress = "";
						this.form.description = "";
						this.form.createDate = "";
						this.form.updateDate = "";


						this.seqCateDisabled = false;
						this.orgNameDisabled = false;
						this.orgCodeDisabled = false;
						this.orgAddressDisabled = false;
						this.descriptionDisabled = false;
					}).catch(error => {
						console.info("失败");
						console.info(error.message);
					});
				}



			},

			remove(data) {
				this.$confirm('确认删除此机构吗？', '提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						this.type = "删除";
						deteleOrg({
							"seqCate": data.seqCate
						}).then(response => {
							if (response.data.code == "0000") {
								this.$message.success(response.data.message);
							} else {
								this.$message.error(response.data.message);
							}
						}).catch(error => {
							console.info("失败");
							console.info(error.message);
						});

						this.labelShow = false;
						this.getList();
						this.formShow = false;
						this.$nextTick(() => {
							this.labelShow = true;
						});
					})
					.catch(() => {
						this.$message({
						duration:5000,
							type: 'info',
							message: '已取消删除'
						});
					});

			},


			//鼠标
			mouseenter(data) {
				this.$set(data, 'show', true)
			},

			mouseleave(data) {
				this.$set(data, 'show', false)
			},


		}
	}
</script>

<style scoped>
	
	.org_footer{
		position: relative;
		top:100%;
		background-color: #FBFBFB;
		left:260px;
		width: calc(100% - 260px );
		text-align: left;
		margin-top:-50px;
		height:50px;
		line-height: 50px;
	}
	
	
	.org {
		height: 100%;
	}
	
	.orgContainer .el-tree{
		color:#333333;
		font-size:13px;
		background-color: #F2F2F2;
	}

	.el-row-one {
		margin-left: 10px;
		margin-top: 10px;
	}

	/* .el-row-two {
		margin-left: 200px;
		margin-top: 30px;
		margin-right: 300px;
	} */

	.space_line {
		border-right: 1px solid #ddd;
	}
	
	
	
	.orgAside{
		background-color: #F2F2F2;
		
	}
	
	.orgContainer{
		height: calc(100vh - 190px);
	}
</style>
